<template>
  <div class="show-file__item">
    <!-- 底层展示图片或文件类型图标 -->
    <div class="show-file__item-back">
      <el-image class="img" ref="imageRef" :src="fileUrl" :preview-src-list="[fileUrl]"/>
    </div>

    <!-- 可操作按钮 -->
    <div class="show-file__item-actions">
      <span @click="handlePreview"><i class="el-icon-zoom-in" title="预览"></i></span>
      <span @click="handleDownload" v-if="canDownload"><i class="el-icon-download"></i></span>
      <span @click="handleRemove" v-if="canRemove"><i class="el-icon-delete"></i></span>
    </div>

  </div>
</template>

<script>
import { saveAs } from 'file-saver'
import { getFileName } from '@/utils/tools/url'

export default {
  name: 'ShowItem',
  props: {
    file: String,
    disabled: Boolean,
    disabledDownLoad: Boolean, // 禁用状态是否显示下载
  },
  computed: {
    fileUrl() {
      return this.staticUrl(this.file || '')
    },
    canDownload() {
      return !this.disabled || this.disabled && this.disabledDownLoad
    },
    canRemove() {
      return !this.disabled
    },
  },
  methods: {
    handlePreview() { // 预览
      this.$refs.imageRef.clickHandler()
    },
    handleDownload() {  // 下载
      saveAs(this.fileUrl, getFileName(this.fileUrl) || '下载图片')
    },
    handleRemove() { // 删除
      this.$emit('remove')
    }
  }
}
</script>

<style lang="scss" scoped>
.full {
  width: 100%;
  height: 100%;
}
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.absolute {
  position: absolute;
  top: 0;
  left: 0;
  @extend .full;
}
.show-file__item {
  @extend .full;
  border: 1px solid #c0ccda;
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  &-back {
    @extend .full;
    @extend .flex-center;
    z-index: 1;
    padding: 2px;
    .img {
      @extend .full;
      object-fit: contain;
      ::v-deep img {
        object-fit: contain;
      }
    }
  }

  &-actions {
    @extend .absolute;
    z-index: 20;
    padding: 0 10%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    span {
      display: none;
      color: #fff;
      font-size: 20px;
      cursor: pointer;
    }
    &:hover {
      background: rgba(0, 0, 0, .5);
      span {
        display: inline-block;
      }
    }
  }
}
</style>
